<template>
	<view>
		<view class="form">
			<view class="flex item">
				<view class="label">
					头像
				</view>
				<!-- #ifdef MP -->
				<button class="right flex avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" :src="form.avatar" mode="aspectFill"></image>
					<image class="right_icon" src="/static/img/more.png" mode=""></image>
				</button>
				<!-- #endif -->
				<!-- #ifndef MP -->
				<view class="right flex" @click="up">
					<image class="avatar" :src="form.avatar" mode="aspectFill"></image>
					<image class="right_icon" src="/static/img/more.png" mode=""></image>
				</view>
				<!-- #endif -->

			</view>
			<view class="flex item1">
				<view class="label">
					昵称
				</view>
				<view class="right flex">
					<!-- #ifdef MP -->
					<view class="input">
						<input type="nickname" style="text-align: right;font-size: 28rpx;color: #333;"
							@blur="userNameInput" v-model="form.nickname"></input>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<view class="input">
						<u--input inputAlign='right' placeholder="" placeholderStyle='color:#8B8B8B;' color='#333'
							fontSize='28rpx' border='none' v-model="form.nickname"></u--input>
					</view>
					<!-- #endif -->

					<image class="right_icon" src="/static/img/more.png" mode=""></image>
				</view>
			</view>
			<view class="flex item1">
				<view class="label">
					手机号
				</view>
				<view class="right flex">
					<view class="input">
						<u--input inputAlign='right' placeholder="" placeholderStyle='color:#8B8B8B;' color='#333'
							fontSize='28rpx' border='none' v-model="form.mobile"></u--input>
					</view>
					<image class="right_icon" src="/static/img/more.png" mode=""></image>
				</view>
			</view>
			<view class="flex item1">
				<view class="label">
					ID
				</view>
				<view class="right flex">
					<view class="input">
						<u--input readonly inputAlign='right' placeholder="" placeholderStyle='color:#8B8B8B;'
							color='#333' fontSize='28rpx' border='none' v-model="form.id"></u--input>
					</view>
					<image class="right_icon" src="/static/img/more.png" mode=""></image>
				</view>
			</view>
			<view class="flex item1">
				<view class="label">
					邀请人
				</view>
				<view class="right flex">
					<view class="input">
						<u--input readonly v-if="form.parent" inputAlign='right' placeholder=""
							placeholderStyle='color:#8B8B8B;' color='#333' fontSize='28rpx' border='none'
							v-model="form.parent.username"></u--input>
					</view>
					<image class="right_icon" src="/static/img/more.png" mode=""></image>
				</view>
			</view>
			<view class="flex item1">
				<view class="label">
					微信
				</view>
				<view class="right flex">
					<view class="input" v-if="form.openid">
						已绑定
					</view>
					<view class="input" v-else @click="bandwx">
						去绑定
					</view>
					<image class="right_icon" src="/static/img/more.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="btn_box">
			<view class="btn" @click="modify">
				确认修改
			</view>
			<view class="btn btn2" @click="signOut">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		profile,
		getopenid,
		userInfo
	} from '@/api/my.js'
	import {
		outLogin
	} from '@/api/login.js'
	import {
		upload
	} from '@/api/product.js'
	export default {
		data() {
			return {
				form: {
					
				},
				nickname: ''
			};
		},
		methods: {
			//获取昵称输入内容
			userNameInput(e) {
				this.form.nickname = e.detail.value
			},
			// 修改
			modify() {
				let {
					nickname,
					gender,
					avatar,
					mobile
				} = this.form
				profile({
					nickname,
					gender,
					avatar,
					mobile
				}).then(res => {
					if (res.data.code == 1) {
						userInfo().then(r => {
							this.form = r.data.data
							uni.setStorageSync('userinfo', r.data.data)
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tabbar/mine'
							})
						}, 1000)
						
					}
				})
			},
			bandwx() {
				uni.getUserProfile({
					provider: 'weixin',
					desc: '用于登录',
					success: function(infoRes) {
						uni.login({
							provider: 'weixin',
							onlyAuthorize: true,
							success: function(loginRes) {
								getopenid({
									code: loginRes.code
								}).then(res => {
									let openid = res.data.data.openid
									profile({
										openid
									}).then(res => {
										if (res.data.code == 1) {
											uni.showToast({
												title: '绑定成功',
												icon: 'none'
											})
											setTimeout(() => {
												userInfo().then(r => {
													this.form = r
														.data.data
													uni.setStorageSync(
														'userinfo',
														r.data
														.data)
												})
											}, 1000)
										}
									})
								})
							}
						});
					}
				});
			},
			// 退出
			signOut() {
				outLogin().then(res => {
					// console.log(res.data)
					if (res.data.code == 1) {
						// uni.removeStorageSync('token')
						uni.clearStorageSync()
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/login'
							})
						}, 1000)
					}
				})
			},
			up() {
				let _this = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: _this.$BASE_URL + '/api/common/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								token: uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								_this.form.avatar = JSON.parse(uploadFileRes.data).data.fullurl
								console.log(_this.form.avatar)
							}
						});
					}
				});
			},
			onChooseAvatar(e) {
				// console.log(e)
				let _this = this
				uni.uploadFile({
					url: _this.$BASE_URL + '/api/common/upload',
					filePath: e.detail.avatarUrl,
					name: 'file',
					header: {
						token: uni.getStorageSync('token')
					},
					success: (uploadFileRes) => {
						_this.form.avatar = JSON.parse(uploadFileRes.data).data.fullurl
						// console.log(_this.form.avatar)
					}
				});
			}
		},
		onLoad: function() {
			this.form = uni.getStorageSync('userinfo')
		}
	}
</script>

<style lang="less">
	.form {
		border-top: 2rpx solid #F4F6F8;
		padding: 0 22rpx;

		.item {
			padding: 20rpx 13rpx;
			border-bottom: 2rpx solid #F4F6F8;
			font-size: 32rpx;

			.avatar {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
			}

		}

		.item1 {
			padding: 32rpx 13rpx;
			border-bottom: 2rpx solid #F4F6F8;
			font-size: 32rpx;
		}

		.right_icon {
			width: 14rpx;
			height: 26rpx;
			margin-left: 32rpx;
		}
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.btn_box {
		position: fixed;
		bottom: 90rpx;
		left: 30rpx;

		.btn {
			width: 687rpx;
			line-height: 114rpx;
			background: linear-gradient(153deg, #FF8717, #FF5F00);
			border-radius: 57rpx;
			text-align: center;
			font-size: 36rpx;
			color: #fff;
		}

		.btn2 {
			margin-top: 30rpx;
			border: 1rpx solid #FF6A06;
			width: 685rpx;
			line-height: 112rpx;
			background: #fff;
			color: #FF7A10;
		}
	}

	.avatar-wrapper {
		padding: 0;
		background-color: #fff;
		border: 0;
		margin: 0;

		&:after {
			border: 0;
		}
	}
</style>
